<!-- 页面为点击个人订单进入的订单详情 -->
<template>
  <div class="wrap">
    <Header />
    <div class="orderDetail">
      <h2 class="orderDetailTital">
        订单详情<span class="returnOrder" @click="goBack">返回我的订单</span>
      </h2>
      <div class="orderStatus">
        <span>当前订单状态：<i class="Status">已使用(￥99999.99)</i> </span
        ><span class="StatusOption"
          >如需退款，请登录美团app通过订单详情页完成退款操作</span
        >
      </div>
      <dl class="coupon">
        <div class="couponTitle">美团券</div>
        <ul class="coupontip">
          <li>小提示：记下或拍下美团券密码向商家出示即可消费，无需等待短信</li>
          <li>美团券密码：xxxxxxxxx <span>已退款</span></li>
        </ul>
        <div class="couponTitle">订单信息</div>
        <ul class="order-info">
          <li>订单编号xxxxxxx</li>
          <li>下单时间：2021-06-20 06:30</li>
          <li>付款方式：抵用券 促销</li>
          <li>付款时间2021-06-20 06:30</li>
        </ul>
        <div>
          <div class="couponTitle">团购信息</div>
          <dd>
            <table class="orderContent">
              <tbody>
                <tr>
                  <th width="100">团购项目</th>
                  <th width="50">单价</th>
                  <th width="10"></th>
                  <th width="50">数量</th>
                  <th width="10"></th>
                  <th width="50">优惠</th>
                  <th width="10"></th>
                  <th width="54">支付金额</th>
                </tr>
                <tr>
                  <td>
                    <a href="/meishi/d692668238.html" class="goodsDetail"
                      >海南椰子鸡套餐，建议2人使用</a
                    >
                  </td>
                  <td>99999.99</td>
                  <td>x</td>
                  <td>1</td>
                  <td>-</td>
                  <td>99999.99</td>
                  <td>=</td>
                  <td>¥0.00</td>
                </tr>
              </tbody>
            </table>
          </dd>
        </div>
      </dl>
    </div>
    <Footer></Footer>
  </div>
</template>

<script >
import { defineComponent } from "vue";
export default defineComponent({
  name: "OrderDetail",
});
</script>

<script  setup>
import Footer from "../../../components/Footer/index.vue";
import Header from "../../../components/Header/index.vue";
import router from "../../../router";
const goBack = () => {
  router.replace({
    path: "/personal",
    query: {
      page: "myOrder",
    },
  });
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
}
.orderDetail {
  box-sizing: border-box;
  width: 980px;
  margin: 10px auto;
  padding: 25px;
  border: 1px solid #eee;
}
.orderDetailTital {
  padding: 0 0 10px;
  margin: 0 0 10px;
  font-size: 28px;
  color: #333;
  border-bottom: 1px solid #ddd;
}
.returnOrder {
  float: right;
  font-weight: normal;
  color: #2bb8aa;
  font-size: 16px;
}
.orderStatus {
  padding: 8px 16px;
  margin: 0 0 10px;
  font-size: 12px;
  border: 1px solid #f5d8a7;
  background-color: #fff6db;
  .Status {
    font-weight: 700;
    color: #d00;
  }
  .StatusOption {
    float: right;
  }
}
.coupon {
  border: 1px solid #e5e5e5;
  padding-bottom: 10px;
}
.couponTitle {
  margin: 10px 0;
  padding: 5px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  background-color: #eee;
}
.coupontip {
  margin: 5px;
  padding: 5px;
  border: 1px solid #eee;
  background-color: #eee;
  color: #999;
}
.order-info {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.orderContent {
  width: 100%;
  text-align: left;
  tr {
    height: 30px;

    th,
    td {
      height: 30px;
      padding-left: 10px;
    }
    .goodsDetail {
      color: #2bb8aa;
    }
  }
}
</style>
